import React, { memo, useEffect} from 'react'

import { useDispatch, useSelector, shallowEqual } from 'react-redux';

import { HOT_RECOMMEND_LIMIT } from '@/common/contants';

import { getHotRecommendAction } from '../../store/actionCreators';
// 自定义组件
import ThemeHeader from '@/components/theme-header';
import SongsCover from '@/components/songs-cover';
// 样式组件
import {
  HotRecommendWrapper
} from './style'

export default memo(function HotRecommend() {
  // redux hooks
  const { hotRecommends } = useSelector(state => ({
    hotRecommends: state.getIn(["recommend", "hotRecommends"])
  }), shallowEqual);
  const dispatch = useDispatch();


  // other hooks
  useEffect(() => {
    dispatch(getHotRecommendAction(HOT_RECOMMEND_LIMIT));
  }, [dispatch]);

  return (
    <HotRecommendWrapper>
      <ThemeHeader title="热门推荐" keywords={["华语", "流行", "民谣", "摇滚", "电子"]}/>
      <div className="recommend-list">
        {
          hotRecommends.map((item, index) => {
            return <SongsCover key={item.id} info={item}/>
          })
        }
      </div>
    </HotRecommendWrapper>
  )
})
